<template>
  <q-card class="props-area q-pa-sm fit overflow-auto no-padding">
    <div class="fit no-wrap column">
      <div v-if="!hideHeader" class="panel-header text-subtitle2 text-blue-grey-9" style="padding: 5px 15px;">属性面板 {{currentNode.type}}</div>
      <!-- 属性面板 -->
      <q-scroll-area class="panel-body">
        <q-list class="bg-white" separator>
          <q-expansion-item v-for="c in category" icon="style" header-class="text-blue-grey" default-opened :label="categoryName[c] || c" :caption="c">
            <q-list class="q-pa-md" separator>
              <template v-for="(p,key) in config.props">
                <q-item dense v-if="p.category.includes(c)" style="padding: 0;">
                  <PropsItem :p="p" :k="key" :option="option"></PropsItem>
                </q-item>
              </template>
            </q-list>
          </q-expansion-item>
        </q-list>
      </q-scroll-area>
    </div>
  </q-card>
</template>

<script setup>
import {onBeforeMount, provide, ref, watch} from 'vue';
import { requestJSON, RW } from 'dlsjs';
import {getProperty} from "../common/getConfig.js"
import PropsItem from "./PropsItem.vue"
const props = defineProps({
  currentNode: {
    type: Object,
    default: () => ({})
  },
  dataScope: {
    type: Object,
    default: () => ({})
  },
  hideHeader: Boolean,
  simpleMode: Boolean
})
provide('simpleMode', props.simpleMode)
const option = RW(props.dataScope)
const config = ref({})
const category = ref([])
const categoryName = ref({
  style: '样式属性',
  state: '状态',
  content: '内部元素相关',
  behavior: '行为相关',
  general: '常规',
  navigation: '设置导航'
})

function initCategory(pObj) {
  const c = new Set()
  for(let key in pObj) {
    let p = pObj[key]
    let cNames = p.category.split('|')
    for(let cName of cNames) {
      c.add(cName)
    }
  }
  category.value = Array.from(c)
}

watch(() => props.currentNode.type, async () => {
  config.value = await getProperty()[props.currentNode.type]
  initCategory(config.value.props)
})

onBeforeMount(async () => {
  config.value = await getProperty()[props.currentNode.type]
  initCategory(config.value.props)
})
</script>

<style scoped lang="scss">
.prop-item:hover {
  background-color: $blue-1;
}
.panel-header {
  height: 32px;
  border-bottom: 1px solid #e5e5e5;
}
.panel-body {
  height: 100%;
}
</style>
